HTML elemek részletes bemutatása

A HTML (HyperText Markup Language) minden weboldal alapja. Ezen az oldalon bemutatjuk a legfontosabb HTML elemeket és azok használatát, kezdve a dokumentum szerkezetétől egészen a speciális elemekig.

1. Dokumentum szerkezete

<!DOCTYPE html> – HTML5 dokumentum típus jelölése.
<html lang="..."></html> – az egész HTML dokumentumot keretezi, a "lang" attribútum a nyelvet adja meg.
<head></head> – metaadatok, cím, stílusok, script-ek.
<title> – a weboldal címe a böngésző fülén.
<meta charset="UTF-8"> – karakterkódolás beállítása, így az ékezetes karakterek is helyesen jelennek meg.
<link> – külső CSS fájlok kapcsolása.
<script> – JavaScript kód beszúrása.

2. Címsorok és szöveg

<h1> ... <h6> – címsorok
<p> – bekezdés
<span> – inline elem, stílusozáshoz
<br> – sorváltás
<hr> – vízszintes vonal
<blockquote> – idézet
<strong> – hangsúlyos, félkövér szöveg
<em> – dőlt, hangsúlyos szöveg

3. Linkek és képek

<a href="URL"> – linkek létrehozása
<img src="..." alt="..."> – kép beszúrása
<map> <area> – képtérképek létrehozása

4. Listák

<ul><li> – rendezetlen lista
<ol><li> – rendezett lista

5. Táblázatok

<table> – táblázat
<tr> – táblázatsor
<td> – cella
<th> – fejléccella
<caption> – táblázat cím

6. Űrlapok

<form> – űrlap létrehozása
<input> – mezők (text, password, checkbox, radio, submit)
<textarea> – több soros szövegmező
<button> – gomb
<label> – címke input mezőkhöz
<select><option> – legördülő lista

7. Strukturális HTML5 elemek

<header> – fejléc rész
<footer> – lábléc
<main> – fő tartalom
<section> – tematikus szakasz
<article> – önálló tartalmi egység
<nav> – navigációs menü
<aside> – melléklet, pl. oldalsáv

8. Média elemek

<audio> – hang lejátszása
<video> – videó beillesztése
<source> – média forrás
<iframe> – beágyazott tartalom

9. Egyéb elemek

<div> – blokk konténer
<span> – inline konténer
<code> – kód kiemelése
<pre> – formázott szöveg
<small> – kisebb szöveg
<mark> – kiemelés
<del>, <ins> – törölt és beszúrt szöveg

Tippek kezdőknek

Mindig zárd le a nyitó tageket, kivéve a self-closing tag-eket, mint <br> vagy <img>.
Használj címsorokat a tartalom logikus felépítéséhez.
Kommenteket használj a kód olvashatóságához: 
Formázd a kódot behúzásokkal és sorokkal.
Kezdj egyszerű elemekkel, majd haladj a HTML5 strukturális elemek felé.

Példa egyszerű HTML dokumentumra

Itt egy rövid példa, amely tartalmaz címsort, bekezdést és linket:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Példa</title>
</head>
<body>
    <h1>Üdv a weboldalon!</h1>
    <p>Ez egy rövid bemutató HTML oldal.</p>
    <a href="https://www.example.com">Kattints ide</a>
</body>
</html>

Weboldal programozás